<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js -->
		<!-- 第一种方式，将vue.js文件放在项目下，进行引入 -->
		<script src="js/vue.js"></script>
		<!-- 第二种方式，直接引入网络地址 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
		<style>
		#note{
			width: 400px;
			height: 600px;
			/* border: 1px solid black; */
			box-shadow: 6px 6px 12px grey;
			position: absolute;
			left: 500px;
			border-radius: 12px;
		}
		#ipt{
			width: 90%;
			height: 30px;
			line-height: 30px;
			border: 0px;
			outline: none;
			font-size: 20px;
			padding-left:10px ;						
		}
		.remove{
			background-color: #FFFFFF;
			border: 0rem;
			position: absolute;
			left: 350px;
			outline: none;
		}
		#mbody{
			height: 400px;
			padding-left: 40px;
		}
		#clear{
			background-color: #FFFFFF;
			border: 0rem;
			outline: none;
			margin-left: 257px;
		}
		
		
		</style>
	</head>
	<body>
		<div id="app">	
			<div id="note">
				<div style="text-align: center;color: red;">
					<h2>记事本</h2>
				</div>
				<div>
					<input v-model="iptmsg" id="ipt" type="text" placeholder="请输入..." 
					@keyup.enter="addMsg()"/>
				<hr />
				</div>
				<div id="mbody">
					<h6 v-for="item,index in msg">
						{{index+1}}&nbsp;{{item}}
						<button class="remove" @click="removeMsg(index)">&times;</button>
					</h6>					
				</div>
				<div v-show="msg.length!=0">
					<hr />
					<div>
						<span>
							共有{{msg.length}}条数据
						</span>
						<button id="clear" @click="clearMsg()">
							清空
						</button>						
					</div>					
				</div>
				
			</div>
		
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				msg:["吃饭饭","睡觉觉","打豆豆"],
				iptmsg:""
			},
			methods:{
				addMsg:function(){
					this.msg.push(this.iptmsg);
					this.iptmsg=""
				},
				removeMsg:function(index){
					this.msg.splice(index,1)
					
				},
				clearMsg:function(){
					this.msg=[]
				}
				
			}												
		})				
		</script>
		
	</body>
</html>
